<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_head.html"; ?>



<h2>HTML코드 작성 규칙</h2>

<h3>1. 파일 경로</h3>
<ul class="notice-txt">
	<li>개발 이관의 편의를 위해 반드시 <strong>절대경로</strong>로 작업한다. 작업이 완료된 HTML 파일은 로컬 브라우저와 다양한 OS에서 확인이 가능하여야 한다.</li>
</ul>
<pre class="brush: js">&lt;!-- 스타일시트 파일 경로 --&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/common.css" /&gt;
&lt;!-- 스크립트 파일 경로 --&gt;
&lt;script type="text/javascript" src="/CMN/js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;!-- 이미지 파일 경로 --&gt;
&lt;img src="/img/btn/btn_list.gif" alt="대체텍스트" title="" /&gt;</pre>


<h3>2. head 영역의 파일 링크</h3>
<ul class="notice-txt">
	<li>웹 문서 전송 속도를 높이기 위하여(Request Count 감소) 최소한의 파일을 사용한다.</li>
</ul>
<pre class="brush: js">&lt;!-- 기본 전역 설정 css 파일 import --&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/global.css" /&gt;
&lt;!-- 특정 사이트 css 파일 --&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/kr/PEB/peb.css" /&gt;

&lt;script type="text/javascript" src="/CMN/js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/CMN/js/jquery-ui-1.10.3.custom.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/CMN/js/bsui.js"&gt;&lt;/script&gt;</pre>
<ul class="notice-txt">
	<li>CSS 파일은 적용규칙에 따라, 전역(모든사이트)에 적용되는 파일과, 특정사이트에만적용되는 파일을 적절히 import 하여 사용한다.</li>
	<li>기본 레이아웃과 구조를 달리하는 페이지는 별도의 css 파일(각 사이트)을 링크하여 재정의하도록 한다.</li>
</ul>



<h3>3. 표준 문법의 사용</h3>
<ul class="notice-txt">
	<li>HTML은 해당 DTD의 명세에 맞게 작성하며, W3C validation을 통과해야 한다.</li>
</ul>
<h5>주의 해야할 특수기호 Entity name</h5>
<table class="tbl-type center" cellspacing="0" cellpadding="0" summary="주의 해야할 특수기호 Entity name">
	<tbody>
		<tr>
			<th>Character</th>
			<td>"</td>
			<td>&amp;</td>
			<td>&lt;</td>
			<td>&gt;</td>
			<td>&nbsp;</td>
			<td>&middot;</td>
		</tr>
		<tr>
			<th>Entity Name</th>
			<td>&amp;quot;</td>
			<td>&amp;amp;</td>
			<td>&amp;lt;</td>
			<td>&amp;gt;</td>
			<td>&amp;nbsp;</td>
			<td>&amp;middot;</td>
		</tr>
	</tbody>
</table>
<div class="cite">
	* 참고 : <a href="http://w3schools.com/tags/ref_entities.asp" target="_blank">HTML ISO-8859-1 Reference</a>
</div>
<ul class="notice-txt">
	<li>DTD를 제외한 모든 엘리먼트와 애트리뷰트는 소문자로 작성한다.</li>
	<li>애트리뷰트의 값은 큰따움표("")로 묶는다.</li>
	<li>특수기호는 Entity name을 사용하여 entity 코드로 변환한다. Entity 코드는 ISO-8859-1을 기준으로 한다.</li>
	<li>종료 태그를 반드시 선언한다.</li>
</ul>
<h5>종료 태그가 필요한 엘리먼트</h5>
<table class="tbl-type center" cellspacing="0" cellpadding="0" summary="종료 태그가 필요한 엘리먼트">
	<tbody>
		<tr>
			<th>설명</th>
			<td>줄바꿈</td>
			<td>테이블</td>
			<td>프레임</td>
			<td>구분선</td>
			<td>이미지</td>
			<td>서식 컨트롤</td>
			<td>헤드 링크</td>
			<td>메타 태그</td>
			<td>오브젝트 요소</td>
		</tr>
		<tr>
			<th>Element Name</th>
			<td>&lt;br /&gt;</td>
			<td>&lt;col /&gt;</td>
			<td>&lt;frame /&gt;</td>
			<td>&lt;hr /&gt</td>
			<td>&lt;img /&gt;</td>
			<td>&lt;input /&gt;</td>
			<td>&lt;link /&gt;</td>
			<td>&lt;meta /&gt;</td>
			<td>&lt;param /&gt;</td>
		</tr>
	</tbody>
</table>




<h3>4. 파일의 인코딩</h3>
<ul class="notice-txt">
	<li>*.html, *.css, *.js의 파일의 저장 방식을 UTF-8로 설정한다. 반드시 개발과 협의가 필요하다.</li>
</ul>
<h5>* 참고 - 문자셋(charset)별 인코딩</h5>
<table class="tbl-type center" cellspacing="0" cellpadding="0" summary="문자셋(charset)별 인코딩">
	<tbody>
		<tr>
			<th>문자셋(charset)</th>
			<th>기본 인코딩</th>
		</tr>
		<tr>
			<td>charset=utf-8</td>
			<td>utf-8</td>
		</tr>
		<tr>
			<td>charset=euc-kr</td>
			<td>ANSI</td>
		</tr>
	</tbody>
</table>
<img src="../img/setting_encoding.gif" alt="" title="" class="example-img" />
<p class="setup-path"><span>Editplus 파일 저장 설정 방법 : Editplus &gt; 도구 &gt; 기본설정 &gt; 파일</span></p>




<h3>5. 코드 들여쓰기</h3>
<ul class="notice-txt">
	<li>코드의 가독성을 높이고 전체 HTML 구조를 쉽게 파악하기 위하여 들여쓰기 규칙을 준수한다. 마크업의 중첩이 깊어질 때마다 자식 엘리먼트는 1탭 들여 쓰고, 1탭의 크기는 공백 4칸으로 설정한다.</li>
	<li><strong>주의:</strong>탭 대신 공백 삽입 옵션은 반드시 체크 해제 한다.</li>
</ul>
<img src="../img/setting_indent.gif" alt="" title="" class="example-img" />
<p class="setup-path"><span>Editplus 들여쓰기 지정 방법 : Editplus &gt; 도구 &gt; 기본설정 &gt; 파일 &gt; 설정및 구문강조 &gt; 탭/들여쓰기</span></p>
<h5>들여쓰기를 하지 않는 경우</h5>
<pre class="brush: js">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;부산은행 웹 퍼블리싱 가이드&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/base.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/css/layout.css" /&gt;
&lt;script type="text/javascript" src="/js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/js/bsui.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrapper"&gt;</pre>
<ul class="notice-txt">
	<li>html의 자식 엘리먼트인 head, body</li>
	<li>head의 자식 엘리먼트인 meta, link, script</li>
	<li>body의 자식 첫 번째 엘리먼트 div="wrapper"</li>
</ul>





<h3>6. 빈줄</h3>
<ul class="notice-txt">
	<li>그룹을 감싸고 있는 객체를 구분하기 위하여 코드 그룹 간 1줄씩 빈 줄을 만드는 것은 허용한다. 빈 줄의 간격이 1줄을 초과하지 않으며 <em>개발과 연동되는 그룹의 경우는 빈줄보다 주석을 작성</em>한다.</li>
</ul>
<pre class="brush: js">&lt;!-- side-content --&gt;
&lt;div class="side-content"&gt;
	content...
&lt;/div&gt;
&lt;!-- // side-content --&gt;

&lt;!-- primary-content --&gt;
&lt;div class="primary-content"&gt;

	&lt;div class="content-section"&gt;
	content...
	&lt;/div&gt;

&lt;/div&gt;
&lt;!-- // primary-content --&gt;</pre>




<h3>7. 주석</h3>
<ul class="notice-txt">
	<li>코드의 가독성을 높이고 전체 HTML 구조를 쉽게 파악하기 위하여 주석사용을 준수한다.</li>
</ul>
<pre class="brush: js">&lt;div id="wrapper"&gt;
	&lt;!-- header --&gt;
	&lt;div id="header"&gt;...&lt;/div&gt;
	&lt;!-- //header --&gt;
	
	&lt;!-- container --&gt;
	&lt;div id="container"&gt;
		&lt;!-- content --&gt;
		&lt;div id="content"&gt;
			&lt;!-- 게시물 페이징 --&gt;
			&lt;div class="paging"&gt;...&lt;/div&gt;
			&lt;!-- //게시물 페이징 --&gt;
		&lt;/div&gt;
		&lt;!-- //content --&gt;
	&lt;/div&gt;
	&lt;!-- //container --&gt;
	
	&lt;!-- footer --&gt;
	&lt;div id="footer"&gt;...&lt;/div&gt;
	&lt;!-- //footer --&gt;
&lt;/div&gt;</pre>
<ul class="notice-txt">
	<li>주석 기호와 주석 내용 사이에는 반드시 공백 한 칸이 있어야 한다.</li>
	<li>주석 기호와 주석 내용 사이에는 다른 기호가 올 수 없다.</li>
	<li>시작과 종료 주석의 내용은 동일해야 한다.</li>
	<li>wrapper을 제외한 레이아웃 엘리먼트는 id이름과 동일한 주석내용을 작성한다.</li>
	<li>레이아웃 엘리먼트를 제외한 독립된 콘텐츠 영역의 주석 표기는 선택 사항이다.</li>
</ul>





<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_foot.html"; ?>